var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
var toggle_del = false;

// Funktion um das Bild zu laden
(function () {
    var takePicture = document.querySelector("#take-picture"),
        showPicture = document.querySelector("#show-picture");
 
    if (takePicture && showPicture) {
        takePicture.onchange = function (event) {
            var files = event.target.files,
                file;
            if (files && files.length > 0) {
                file = files[0];
                try {
                    var URL = window.URL || window.webkitURL;
                    
                    clearWhole();
                    
                    var imgURL = URL.createObjectURL(file);

                    showPicture.src = imgURL;

                    URL.revokeObjectURL(imgURL);
                }
                catch (e) {
                    try {
                        // Error if createObjectURL not working
                        var fileReader = new FileReader();
                        fileReader.onload = function (event) {
                            showPicture.src = event.target.result;
                        };
                        fileReader.readAsDataURL(file);
                    }
                    catch (e) {
                        // Error if createObjectURL and FileReader not working
                        var error = document.querySelector("#error");
                        if (error) {
                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
                        }
                    }
                }
            }
        };
    }
})();

// Funktion um aus dem original geladenem Bild ein Canvas zum bearbeiten zu machen
function createImageOnCanvas(imageId, copyId) {
	var pic = document.getElementById(imageId);
    var height = pic.height;
    var width = pic.width;
    if ($(window).width() < width) {
        var ratio = $(window).width() / pic.width;
        height = height * ratio;
        width = $(window).width();
    }
    if ($(window).height() < height) {
        var ratio = $(window).height() / height;
        width = width * ratio;
        height = $(window).height();
    }
	canvas.width = width;
	canvas.height = height;
    var img = new Image();
    context.drawImage(document.getElementById(imageId), 0, 0, width,height);
    save("imgCanvas");
    document.getElementById(copyId).src = document.getElementById("imgCanvas").toDataURL();
    $.mobile.changePage( $("#pagetwo"), "slide", true, true);
}

// Funktion zum Zeichnen von roten Punkten oder zum löschen von roten Objekten
function draw(copyId, e) {
    var pos = getMousePos(canvas, e);
    if (toggle_del) {
        var pos = getMousePos(canvas, e);
        context.drawImage(document.getElementById(copyId),pos.x-6,pos.y-6,12,12,pos.x-6,pos.y-6,12,12);
    } else {
        context.fillStyle = "#c82124"; //red
        context.beginPath();
        //context.arc(posx, posy, 10, 0, 2*Math.PI);
        //context.stroke();
        context.arc(pos.x, pos.y, 5, 0, 2*Math.PI);
        context.closePath();
        context.fill();
    }
    save("imgCanvas");
}

// Funktion um Maus Position zum Event auf dem Canvas zu erhalten
function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

// Funktion um das komplette Canvas zu clearen
function clearWhole() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

// Funktion zum Togglen zwischen roten Punkten zeichnen und löschen von roten Objekten
function del(Id) {
    toggle_del = !toggle_del;
    if (toggle_del) {
        Id.style.backgroundImage="url('images/okay.png')";
    } else {
        Id.style.backgroundImage="url('images/delete.png')";
    }
}

// Funktion um aus dem Canvas ein herunterladbares Bild zu machen
function save_pic() {
	document.getElementById("picture").src = document.getElementById("imgCanvas").toDataURL();
	document.getElementById("fine").href = document.getElementById("imgCanvas").toDataURL();
	$.mobile.changePage( $("#pagethree"), "slide", true, true);
}